<template>
  <div class="search-content">
    <div class="type-menu middle-flex">
      <div
        v-for="it in menuList"
        :class="{ active: type === it.key }"
        class="menu-item"
        :key="it.key"
        @click="type = it.key"
      >
        {{ it.name }}
      </div>
    </div>
    <hotel-list v-if="type === 'hotel'" class="hotel-list" :list="hotelList" />
    <wedding-list
      v-if="type === 'wedding'"
      class="wedding-list"
      :list="weddingList"
    />
  </div>
  <common-footer v-if="footerVisible" />
</template>

<script>
import { ref } from "@vue/reactivity";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { computed, onMounted } from "@vue/runtime-core";

import HotelList from "/src/components/hotel-list/index.vue";
import WeddingList from "/src/views/wedding/components/wedding-list.vue";
import CommonFooter from "/src/components/common-footer/index.vue";

export default {
  components: {
    HotelList,
    WeddingList,
    CommonFooter,
  },
  setup() {
    const route = useRoute();
    const store = useStore();
    const selfType = ref("hotel");

    const { type = "hotel" } = route.query;
    const text = computed(() => route.query.text || "");

    selfType.value = type;
    const hotelList = computed(() => {
      return store.state.hotel.list.filter((it) =>
        it.name.includes(text.value)
      );
    });
    const weddingList = computed(() => {
      return store.state.wedding.list.filter((it) =>
        it.name.includes(text.value)
      );
    });

    const footerVisible = computed(() => {
      return selfType.value === "hotel" ? hotelList.length : weddingList.length;
    });

    onMounted(() => {
      store.dispatch("fetchHotel");
      store.dispatch("fetchWedding");
    });

    return {
      type: selfType,
      weddingList,
      hotelList,
      footerVisible,
      menuList: [
        {
          name: "场地",
          key: "hotel",
        },
        {
          name: "套系",
          key: "wedding",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.search-content {
  padding: 0 78px;
}
.wedding-list {
  padding-top: 20px;
}
.type-menu {
  font-size: 16px;
  color: #979797;
  line-height: 22px;
  margin-bottom: 13px;
  .menu-item {
    position: relative;
    cursor: pointer;
    &::after {
      position: absolute;
      bottom: -5px;
      left: 0;
      right: 0;
      margin: 0 auto;
      content: "";
      width: 14px;
      height: 3px;
      background: #ff3a89;
      transform: rotateY(90deg);
      border-radius: 2px;
    }
    &:first-child {
      margin-right: 30px;
    }
    &.active {
      font-weight: bold;
      color: #ffffff;
      line-height: 28px;
      transform: scale(1.25);
      transition: transform 0.3s;
      &::after {
        transform: rotateY(0deg);
        transition: transform 0.3s;
      }
    }
  }
}
</style>